<!DOCTYPE html>
<html lang="zh-cn" class="pui-app" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="Plane UI" />
    <meta name="keywords" content="Plane UI" />
    <title>宠-首页</title>

    <link rel="stylesheet" type="text/css" href="/planeui/dist/css/planeui.css" />
    <style>
        .iScrollIndicator {
            width: 5px !important;
            border: none !important;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<div class="pui-layout pui-browsehappy">
    <a href="javascript:;" class="pui-close" onclick="document.body.removeChild(this.parentNode);"></a>
    <p>您正在使用 <strong class="pui-text-yellow pui-text-xl">过时</strong> 的非现代浏览器，<strong class="pui-text-success pui-text-xl">91.23%</strong> 的人选择 <a href="http://browsehappy.com/" target="_blank" class="pui-text-green-400 pui-text-xl"><strong>升级浏览器</strong></a>，获得了更好、更安全的浏览体验！</p>
</div>
<![endif]-->
<div class="pui-layout pui-app-layout">
    <div class="pui-side-slide-left">
        <div style="height:2000px;">左侧滑出层</div>
    </div>
    <div class="pui-side-slide-top">
        <div style="height:400px;">顶部滑出层</div>
    </div>
    <div class="pui-app-main pui-app-main-prev">
        <header class="pui-app-header pui-bg-blue-300">
            <div class="pui-app-header-aside">
                <!--                <a href="javascript:;" pui-side-slide="left">-->
                <a href="javascript:;">
                    <i class="fa fa-2x pui-text-white">宠</i>
                    <!--                    <i class="fa fa-list fa-2x pui-text-white"></i>-->
                </a>
            </div>
            <div class="pui-app-header-middle" pui-side-slide="top">
                <strong class="pui-h4 pui-text-white">那些温暖的宠</strong>
            </div>
            <div class="pui-app-header-offside">
                <!--                pui-side-slide="right"-->
                <a href="/home/active"  class="pui-text-white pui-text-xxl" style="font-size:12px;line-height:1;line-height:1;padding: 3px 12px 5px;">
                    返回
                </a>
            </div>
        </header>
        <div style="padding-top:5px;">
            <a href="javascript:;">
                <input id="activityId" type="hidden" th:value="${activity.id}"/>
                <img th:src="${activity.url}" width="100%" style="height:160px;"/>
            </a>
        </div>
        <div class="pui-app-main-container" id="wrapper1" style="padding:10px;background-color:#d6f8ff;">
            <div class="pui-tooltip-context">
                <div class="pui-button-sheet pui-button-sheet-table pui-button-sheet-hover-bg-none" style="height:54px;">
                    <div class="pui-button-sheet-row">
                        <a href="javascript:;"><i class="fa fa-2x" style="padding-top:10px;color:#FF3D00;font-size:24px;" th:text="${activity.joins}">11</i>
                            <h5 style="color:#0D79DE">参与宠物数量</h5>
                        </a>
                        <a href="javascript:;"><i class="fa fa-2x" style="padding-top:10px;color:#FF3D00;font-size:24px;" th:text="${activity.views}">11</i>
                            <h5 style="color:#0D79DE">访问量</h5>
                        </a>
                        <a href="javascript:;"><i id="leiji_clicks" class="fa fa-2x" style="padding-top:10px;color:#FF3D00;font-size:24px;" th:text="${activity.clicks}"></i>
                            <h5 style="color:#0D79DE">累计投票数量</h5>
                        </a>
                    </div>
                </div>
            </div>
            <div class="pui-menu-column" style="padding-top:10px;">
                <div class="pui-tab pui-tab-justify">
                    <ul class="pui-tab-head pui-tab-ellipse" style="font-size:16px;">
                        <li class="active">编号排序</li>
                        <li class="">排行榜</li>
                        <li class="">规则详情</li>
                    </ul>
<!--                    <div style="border:1px solid #8798d9;padding-top:90px;"></div>-->
                    <div class="pui-tab pui-tab-justify">
                        <div class="pui-tab-container" >
                            <div class="pui-tab-box" style="display: block;height:500px;">
                                    <div class="pui-layout pui-layout-fixed pui-layout-fixed-1200 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1800">
                                        <div class="pui-grid">
                                            <div class="pui-row">
                                                <form id="join_form">
                                                    <div th:each="item:${dataList}" class="pui-grid-xs-6 pui-grid-sm-4 pui-grid-md-3 pui-grid-lg-3 pui-grid-xl-3 pui-grid-xxl-3" style="padding-bottom:10px;">
                                                        <div class="pui-card">
                                                            <p class="pui-xs-show">
                                                                <img th:src="@{'/upload_pic/'+${item.path}}" style="width:200px;height:200px" class="pui-img-thumbnail pui-img-md pui-img-radius-plus-3">
                                                                <div>
                                                                    <div class="pui-form-group" style="padding:0px;">
                                                                        <input id="ajuId" type="hidden" th:value="${item.ajuId}"/>
                                                                        <input th:id="@{'clicks_v'+${item.ajuId}}" type="hidden" th:value="${item.clicks}"/>
                                                                        <input th:id="@{'clicks_'+${item.ajuId}}" type="button" class="push_click pui-btn pui-btn-secondary pui-btn-block" th:value="@{'给他投票('+${item.clicks}+')'}" value="给他投票(1)">
                                                                    </div>
                                                                </div>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <div class="pui-tab-box" style="display: none;">
                                <div class="pui-layout" style="width:96%;">
                                    <ul class="pui-list pui-list-view pui-list-view-angle-right pui-list-view-round">
                                        <li>
                                            <a href="javascript:;" class="no-angle-right">
<!--                                                <i class="fa fa-calendar pui-text-blue-400">用户信息</i>-->
                                                <summary style="padding:15px 53px 0 0;font-size:16px;">
                                                    <h6>昵称</h6>
                                                </summary>
                                                <summary style="padding:15px 53px 0 0;">
                                                    <h6>投票数量</h6>
                                                </summary>
                                                <lable class="pui-badge pui-badge-error pui-badge-right" style="font-size:16px;">排名</lable>
                                            </a>
                                        </li>
                                        <li th:each="data,iterStat:${topList}">
                                            <a th:id="${data.user_id}" onclick="openChatClick(this);" th:data-id="${data.user_id}" class="no-angle-right">
                                                <i class="fa pui-text-blue-400"><img th:src="${data.userThum}" style="width:50px;height:50px;"/></i>
                                                <summary style="padding:15px 0 0 0;">
                                                    <h6 th:text="${data.userNickName}"></h6>
                                                </summary>
                                                <summary style="padding:15px 0 0 0;float:right;">
                                                    <h6 th:text="${data.clicks}"></h6>
                                                </summary>
                                                <lable class="pui-badge pui-badge-error pui-badge-right pui-square" style="font-size:16px;" th:text="${iterStat.index+1}"></lable>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="pui-tab-box" style="padding-left:20px;font-size:16px;" th:utext="${activity.remark}">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="pui-dl-img-list pui-underline-dashed" th:each="item:${resultList}">
                <dl>
                    <dt style="width:45%">
                        <a href="#"><img th:src="${item.url}" class="pui-img-size-auto pui-img-radius-plus-2"></a>
                    </dt>
                    <dd style="margin-left:48%;">
                        <h5 th:text="${item.title}"></h5>
                        <p th:utext="${item.remark}" style="line-height:16px;"></p>
                        <p class="pui-text-left">
                        <p>
                            <a href="javascript:;" class="pui-btn pui-btn-success pui-btn-xsmall pui-text-shadow"><i class="fa fa-flag fa-large"></i> 报名人数 9999</a>
                        </p><!--                            <a href="#" class="pui-link">试听专辑&gt;&gt;</a>-->
                        </p>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- footer -->
        <footer class="pui-app-footer">
            <div class="pui-button-sheet pui-button-sheet-table pui-button-sheet-hover-pui-bg-none pui-unbordered" style="height:100%;">
                <div class="pui-button-sheet-row" style="height:48px;">
                    <a href="/home/index" pui-side-position="left"><i class="fa fa-home fa-2x"></i>返回首页</a>
                    <a th:href="@{'/home/active/join/'+${activity.id}}" pui-side-position="left"><i class="fa fa-paw fa-2x"></i>我要参与</a>
<!--                    <a id="upload_click" pui-side-position="top"><i class="fa fa-share-alt fa-2x"></i>分享好友</a>-->
                </div>
            </div>
        </footer>
        <div class="pui-mask pui-mask-bg" style="display: none;opacity:0;"></div>

    </div>
</div>
<input id="checkLogin" type="hidden" th:value="${checkLogin}"/>
<input id="autoredirect" type="hidden" th:value="${autoredirect}"/>
<!--[if (gte IE 9) | !(IE)]><!-->
<script type="text/javascript" src="/planeui/app/js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="/planeui/app/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/planeui/dist/js/planeui.patch.ie8.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="/planeui/dist/js/planeui.patch.ie9.js"></script>
<![endif]-->
<script type="text/javascript" src="/planeui/dist/js/planeui.js"></script>
<script type="text/javascript" src="/planeui/app/js/iscroll.js"></script>
<script type="text/javascript" src="/js/activeItem.js"></script>
<!--<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"/>-->
<script type="text/javascript">
    $(function() {
        // wx.config({
        //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        //     appId: 'wxdab423ba3e54b5ee', // 必填，公众号的唯一标识
        //     timestamp: , // 必填，生成签名的时间戳
        //     nonceStr: '', // 必填，生成签名的随机串
        //     signature: '',// 必填，签名
        //     jsApiList: [] // 必填，需要使用的JS接口列表
        // });



        var activityId = $("#activityId").val();
        var views_url = "/home/api/activityViews/"+activityId;
        $.post(views_url,function(data,status){
            console.log("nStatus: " + status);
        });

        PUI(".pui-tab:not(#test3):not(#test2)").tab({
            speed : "_default",
            showMode : "slide",
            //cached : true,
            //ajax : true,
            //ajaxLoading : '<div class="pui-loading-spinner pui-animation-rotate pui-animation-repeat pui-animation-reverse pui-text-center"><span class="fa fa-spinner fa-2x"></span></div> 正在加载内容，请稍后...',
            callback : function(tab, tabHead, tabBox, index, settings) {
                // tabBox.eq(index).append("开启Ajax时，Ajax请求成功后的回调" + index);
            }
        });
        $("#test3").tab({
            speed : "_default",
            showMode : "scroll-x"
        });
        $("#test2").tab({
            speed : "_default",
            showMode : "scroll-y"
        });
    });
</script>
</body>
</html>